var path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader-plugin')

//删除以前的打包文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')



function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

module.exports = {
    // entry: './src/main.ts',
    entry: {
        app: './src/main.ts'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js',
        // 告诉webpack不使用箭头
        // 默认打包后是一个立即执行的箭头函数，在IE 11中也是无法执行的！
        // 加上下面的配置，可以在webpack打包时，最外层不再是箭头函数
        // webpack新版本已经不想兼容IE了！233
        environment: {
            arrowFunction: false
        }
    },
    mode: 'development', // 设置mode
    watch: true, // 监听修改自动打包
    module: {
        rules: [{
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/, // 正则表达式，表示.css后缀的文件
                use: ['style-loader', 'css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            // {
            //     test: /\.ts$/,
            //     // use: 'ts-loader',
            //     //若是数组形式的话，执行顺序是从后到前
            //     use: [
            //         // 配置babel
            //         {
            //             // 指定加载器
            //             loader: "babel-loader",
            //             // 设置babel
            //             options: {
            //                 // 设置预定义的环境
            //                 presets: [
            //                     [
            //                         // 指定环境的插件
            //                         "@babel/preset-env",
            //                         // 配置信息
            //                         {
            //                             // 要兼容的目标浏览器
            //                             targets: {
            //                                 "chrome": "58",
            //                                 "ie": "11"
            //                             },
            //                             // 指定corejs的版本
            //                             // package.json中的版本为3.8.1
            //                             "corejs": "3",
            //                             // 使用corejs的方式，"usage" 表示按需加载
            //                             "useBuiltIns": "usage"
            //                         }
            //                     ]
            //                 ]
            //             }
            //         },
            //         'ts-loader'
            //     ],
            //     //排除文件
            //     exclude: /node_modules/
            // }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'tsWebpack',
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
    ],

    //用来设置引来模块
    resolve: {
        extensions: ['.ts', '.js', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

}